<template>
    <div>
        <template v-for="(item) in menuList">
            <!-- 有次级菜单的,则展开子选项-->
            <el-submenu v-if="item.children && item.children.length > 0" :key="item.id" index="1"
                :class="[currentIndex == item.id ? 'ddd' : '']" @click="isClose(item.id, item.children)">
                <template #title>
                    <el-icon v-if="item.icon != ''">
                        <component :is="item.icon" />
                    </el-icon>
                    <span :class="[item.parentid == 0 ? 'activespan' : 'disactivesapn']">{{ item.name }}</span>
                </template>
                <!-- 递归,实现无限级展开 -->
                <menuTree :menuList="item.children"></menuTree>
            </el-submenu>
            <!-- 没有次级菜单的 -->
            <el-menu-item v-if="!item.children" :key="item.id" :index="item.url"
                :class="[currentIndex == item.id ? 'ddd' : '']" @click="isClose(item.id, item.children)">
                <el-icon v-if="item.icon!=''">
                    <component :is="item.icon" />
                </el-icon>
                <span :class="[item.parentid==0 ?'activespan':'disactivesapn']">{{item.name}}</span>
            </el-menu-item>
        </template>
    </div>
</template>
 
<script>
export default {
    props: {
        menuList: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            currentIndex : 1
        }
    },
    name: 'menuTree',

    methods: {
        isClose(id, children) { 
            if (children && children.length > 0) { 
                 
            } else { 
                this.currentIndex = id   
            } 
            
        }

    }
}
</script>
<style scoped>








.activespan {
    font-size: 15px !important;
}

.disactivesapn {
    margin-left: 20px;
    font-size: 15px !important;
}


.ddd {
    background: #fff;
    color: blue;
    border-radius: 20px 0px 0px 20px;
}

.ddd::before {
    content: "";
    width: 20px;
    height: 20px;
    z-index: 1;
    position: absolute;
    right: 0;
    left: 220px;
    top: -20px;
    background: radial-gradient(at left top, rgb(0 0 0/0) 69%, #f6f7fc 74%);
}

.ddd::after {
    content: "";
    width: 20px;
    height: 20px;
    z-index: 1;
    position: absolute;
    right: 0;
    left: 220px;
    background: radial-gradient(at left bottom, rgb(0 0 0/0) 69%, #f6f7fc 74%);
    top: 55px;
}
.defoult-text{
    color: #fff;
    font-size: 20px;
}




</style>